<template>
  <div class="detail" v-if="goodDetail">
    <!-- 轮播图 Strat -->
    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item @click="onClick" v-for="(image, index) in bannerImgUrlList" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <span>
            {{ current + 1 }}/{{ bannerImgUrlList.length }}
          </span>
        </div>
      </template>
    </van-swipe>
    <!-- 轮播图 End -->

    <div class="pricedetail">
      <div class="price">
        <span class="realprice">￥<b>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.kaolaPrice }}</b></span>
        <span class="discount" v-if="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton">
          {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.priceVO.pricePrefix }}
          <span>￥</span>
          <b>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.priceVO.price }}</b>
        </span>
      </div>
      <!-- 黑卡 Strat -->
      <div class="balckcard" @click="blackCardShow = true">
        <span>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.appGoodsDetailVipInfo.vipLayoutInfo.mainText
        }}</span>
        <img src="https://kaola-haitao.oss.kaolacdn.com/8ac1f870-eeea-4f14-9c79-253c232dcd9c.webp">
        <p class="quickBtn">
          <span>立即开卡</span>
        </p>
      </div>
      <van-action-sheet v-model="blackCardShow"
        :title="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.title"
        :cancel-text="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.bottonText">
        <div class="content">
          <div class="title"
            v-html="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.oneSaveView.saveValue">
          </div>
          <div class="item"
            v-for="(item, index) in goodDetail.pageInitialProps[0].body.dx.data.blackCard.events.showPointIconView[0].fields.saveList"
            :key="index + item.saveType">
            <span>{{ item.saveName }}</span>
            <span v-html="item.saveValue"></span>
            <p>{{ item.saveNameDesc }}</p>
          </div>
        </div>
      </van-action-sheet>
      <!-- 黑卡 End -->

      <div class="info">
        <van-cell is-link @click="infoshow = true" value="更多">
          <template #title>
            <div>
              <span
                v-for="item in goodDetail.pageInitialProps[0].body.goodsDynamic.promotionSlipView.singleSlipViewList"
                :key="item.slip">
                {{ item.slip }}
              </span>
            </div>
          </template>
        </van-cell>
        <van-action-sheet v-model="infoshow" title="优惠促销" cancel-text="确认">
          <div class="content">
            <p>促销活动</p>
            <div class="item">
              <span>立减</span>
              <p class="txt">下单立减30元。。。。。。</p>
            </div>
          </div>
        </van-action-sheet>
      </div>

      <div class="tax">
        <van-cell @click="infoshow1 = true">
          <template #title>
            <div>
              <span>
                {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxStr }}
              </span>
              <img :src="require('@/assets/img/good/taxinfo.png')">
            </div>
          </template>
        </van-cell>
        <van-action-sheet v-model="infoshow1"
          :title="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.title">
          <div class="content">
            <span>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.ruleInfo }}</span>
            <div class="txt"
              v-for="item in goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.contents"
              :key="item" v-html="item">
            </div>
          </div>
        </van-action-sheet>
      </div>

      <h2>{{ goodDetail.pageInitialProps[0].body.dx.data.title.fields.title.text }}</h2>

      <div class="type">
        <div class="item"
          v-for="item in goodDetail.pageInitialProps[0].body.dx.data.mindTags.fields.mindTags.mindTagItemList"
          :key="item.name">
          <img :src="item.iconUrl">
          <span>{{ item.name }}</span>
        </div>
      </div>

    </div>

    <!-- 放心购  start-->
    <div class="addr">
      <div class="noworry">
        <van-cell is-link @click="showPopup" class="myself">
          <template #title>
            <img :src="goodDetail.pageInitialProps[0].body.dx.data.noWorry.fields.noWorry.pageIcon">
            <span>{{
                goodDetail.pageInitialProps[0].body.dx.data.noWorry.fields.noWorry.goodsNoWorryIntegration[0].itemContent
            }}</span>
          </template>
        </van-cell>
        <van-popup v-model="showPop" closeable close-icon="cross" close-icon-position="top-right" position="bottom"
          :style="{ height: '60%' }">
          <van-cell is-link
            :value="goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.floatLinkTitle">
            <template #title>
              <img
                :src="goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.floatIcon">
            </template>
          </van-cell>
          <div class="item"
            v-for="item in goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.goodsNoWorryFloatIntegration[0].goodsNoWorryItemList"
            :key="item.title">
            <div class="left">
              <img :src="item.icon">
            </div>
            <div class="right">
              <span>{{ item.title }}</span>
              <h4>{{ item.description }}</h4>
            </div>
          </div>
        </van-popup>
      </div>
    </div>

    <!-- 放心购 end -->
    <!-- 用户评价  start-->
    <div class="comment">
      <van-cell :title="comment.commentLabel" :value="(comment.productgrade * 100 + '').slice(0, 2) + '%'" />
      <van-tag v-for="index in 3" :key="'tag' + index" ype="primary">{{ comment.cmtTagList[index].count }}</van-tag>
      <div class="items">
        <div class="item" v-for="item in comment.commentList" :key="item.goodsCommentId">
          <div class="left">
            <div class="top">
              <img style="width: 20px;" :src="item.avatarKaola" alt="">
              <span>{{ item.nicknameKaola }}</span>
            </div>
            <div class="bottom">
              <p>{{ item.commentContent }}</p>
            </div>
          </div>
          <div class="right">
            <img :src="item.imgUrls[0]" style="width: 99px;" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 用户评价 end -->
    <!-- 信息  start-->
    <div class="detailInfo" v-if="detailInfo">
      <div class="info">产品信息</div>
      <div class="propertys">
        <div class="property" v-for="(item, index) in detailInfo.goodsPropertyList" :key="index">
          <span class="name">{{ item.propertyName }}</span>
          <span class="tag" v-for="(tag, index) in item.goodsPropertyValueList" :key="index">{{
              tag.propertyValue
          }}</span>
        </div>
        <div class="imgs" v-html="detailInfo.detail">

        </div>
      </div>
    </div>
    <!-- 信息 end -->
    <!-- 底部栏 Strat -->
    <van-goods-action>
      <van-goods-action-icon to="/" :icon="this.bottomTab[0]" text="首页" />
      <van-goods-action-icon :icon="this.bottomTab[1]" text="客服" />
      <van-goods-action-icon to="/cart" :icon="this.bottomTab[2]" text="购物车" />
      <van-goods-action-button type="warning" text="加购" />
      <van-goods-action-button type="danger">
        <template v-slot:default>
          <span>立即购买</span>
          <span v-if="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton">
            {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.content }}
          </span>
        </template>
      </van-goods-action-button>
    </van-goods-action>
    <!-- 底部栏 End -->
  </div>
</template>

<script>
import { ImagePreview } from 'vant';

export default {
  data() {
    return {
      goodId: this.$route.params.id,
      goodDetail: null,
      bannerImgUrlList: null,
      current: 0,
      bottomTab: [
        require("@/assets/img/good/home.svg"),
        require("@/assets/img/good/kefu.svg"),
        require("@/assets/img/good/cart.svg")
      ],
      infoshow: false,
      infoshow1: false,
      blackCardShow: false,
      hasDiscount: true,
      showPop: false,
      comment: [],
      detailInfo: {},

    }
  },
  created() {
    this.$apiProxy({
      url: `/__aggregation/goodsdetail/product?goodsId=${this.goodId}`,
    }).then(res => {
      // g全局，不然会返回两个  slice(24,-9)从window.__INITIAL_DATA__=(24是它的length+1)之后开始截取,一直取到<script>(-9是倒着数它的length)之前
      let datas = res.match(/window.__INITIAL_DATA__=(.*?)<\/script>/g)[0].slice(24, -9);
      datas = JSON.parse(datas);
      this.goodDetail = datas;
      // this.goodDetail = res.data;
      this.bannerImgUrlList = this.goodDetail.pageInitialProps[0].body.goodsDynamic.bannerImgUrlList;
    })
    this.$apiProxy({
      url: `/comment/goodsdetail?version=1.0`,
      method: "post",
      data: {
        "abCaseNumber": 0,
        "goodsId": 279362
      }
    }).then(res => {
      this.comment = res.body
    })
    this.$apiProxy({
      url: "/goods/content?version=1.0",
      data: {
        "contentParam": {
          "goodsId": this.goodId
        }
      },
      method: "post"
    }).then(res => {
      console.log(res.body);
      this.detailInfo = res.body;
    })
  },
  methods: {
    onClick() {
      ImagePreview({
        images: this.bannerImgUrlList,
        startPosition: this.current,
        closeable: true,
        closeIcon: "cross"
      });
    },
    onChange(index) {
      this.current = index
    },
    showPopup() {
      this.showPop = true;
    },
  },
}
</script>


<style lang="less">
.detail {
  background-color: rgb(239, 239, 239);

  .van-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;

      img {
        width: 100%;
      }
    }

    .custom-indicator {
      width: 35px;
      height: 18px;
      position: absolute;
      left: 50%;
      color: white;
      text-align: center;
      line-height: 18px;
      letter-spacing: 4px;
      bottom: 20px;
      margin-left: -18px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      background: url(../assets/img/good/swipe-page-bg.png);
      background-size: cover;

      span {
        display: block;
        transform: scale(0.9);
      }
    }
  }

  .van-goods-action {
    height: 51px;
    display: flex;
    padding: 0px 10px 5px 0px;

    .van-goods-action-icon {
      width: 32px;
      min-width: 20px;
      white-space: nowrap;

      .van-icon {
        img {
          width: 21px;
          height: 21px;
        }
      }
    }

    .van-button--warning {
      margin-left: 10px;
      margin-right: 8.5px;
      height: 36px;
      line-height: 35px;
      border: 1px solid #ff1e32;
      font-size: 14px;
      color: #ff1e32;
      border-radius: 20px;
      text-align: center;
      background: transparent;
      flex: 0 1 20%;
    }

    .van-button--danger {
      flex: 1;
      color: rgb(255, 255, 255);
      height: 36px;
      border-radius: 20px;
      background-image: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 61, 109) 100%);

      .van-button__content {
        .van-button__text {
          display: flex;
          font-size: 13px;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  .pricedetail {
    margin-top: 7px;
    margin-left: 10px;
    width: 355px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);
    border-radius: 8px;
    padding: 10px 0;

    .price {
      width: 355px;
      padding: 0px 0px 0px 10px;
      margin: 0px 0px 10px;
      position: relative;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      align-items: stretch;

      span {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        align-self: center;
        font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
        color: rgb(255, 0, 0);
        justify-content: left;
        font-weight: bold;
        text-decoration: unset;
        font-style: inherit;
        width: auto;
      }

      .realprice {
        height: 30px;
        padding: 0px;
        margin: 2px 0px 0px 1px;
        font-size: 16px;

        b {
          margin: 0px;
          font-size: 24px;
          font-weight: bold;
        }
      }

      .discount {
        height: 28px;
        padding: 0px 12px;
        line-height: 25px;
        margin: 1px 0px 0px 7px;
        position: relative;
        overflow: hidden;
        align-items: flex-end;
        font-weight: normal;
        font-size: 13px;
        border-radius: 14px;
        background-image: linear-gradient(to right, rgb(255, 232, 233), rgb(255, 232, 233));

        span {
          height: 28px;
          padding: 0px;
          margin: 0px;
          font-size: 13px;
          font-weight: normal;
        }

        b {
          font-size: 20px;
          font-weight: bold;
        }

      }
    }

    .balckcard {
      height: 37px;
      width: 335px;
      padding: 0px 10px;
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      overflow: hidden;
      align-items: center;
      align-self: center;
      background-image: linear-gradient(to right, rgb(48, 48, 48), rgb(89, 89, 89));
      border-radius: 5px;

      span {
        height: 14.4px;
        width: auto;
        padding: 0px;
        margin: 0px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        align-self: center;
        font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: rgb(255, 222, 177);
        justify-content: left;
        font-weight: normal;
        text-decoration: unset;
        font-style: inherit;
      }

      img {
        width: 13px;
        height: 13px;
        object-fit: contain;
        margin-left: 3px;
      }

      .quickBtn {
        height: 21px;
        width: 72px;
        padding: 0px;
        margin: 0px;
        position: absolute;
        right: 40px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        align-self: center;
        background-image: linear-gradient(to right, rgb(255, 226, 186), rgb(255, 237, 212));
        border-radius: 10px;

        span {
          height: 16.8px;
          width: auto;
          padding: 0px;
          left: 8px;
          top: 2.1px;
          display: flex;
          flex-direction: row;
          overflow: hidden;
          align-items: center;
          align-self: center;
          text-align: center;
          font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 12px;
          color: rgb(51, 51, 51);
          justify-content: center;
          font-weight: normal;
          text-decoration: unset;
          font-style: inherit;
        }
      }
    }

    .info {
      margin-bottom: 10px;
      padding: 0px 10px;

      .van-cell {
        padding: 0px;

        .van-cell__title {
          display: flex;
          flex-direction: row;

          span {
            height: 22px;
            width: auto;
            padding: 3px;
            margin-right: 7px;
            position: relative;
            background-color: rgb(255, 234, 234);
            color: rgb(255, 0, 0);
            border-radius: 3px;
            height: 22px;
            font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
            font-size: 13px;
            max-width: 200px;
            font-weight: normal;
          }
        }

        .van-cell__value {
          color: rgb(255, 0, 0);
        }

        .van-icon {
          color: rgb(255, 0, 0);
          margin-left: 0px;
          font-size: 12px;
        }
      }
    }

    .tax {
      margin-bottom: 10px;

      .van-cell {
        padding: 0 10px;

        .van-cell__title {
          color: #999;
          font-size: 13px;

          img {
            width: 12px;
            height: 12px;
            vertical-align: top;
            margin-top: 5px;
          }
        }
      }
    }

    h2 {
      height: 48px;
      padding: 0px 10px;
      width: 100%;
      font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 17px;
      color: rgb(51, 51, 51);
      font-weight: bold;
      line-height: 24px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .type {
      margin-top: 10px;
      height: 15.6px;
      width: 100%;
      padding: 0px 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;

      .item {
        margin-right: 10px;
        display: flex;
        align-items: center;

        img {
          height: 15px;
          width: 15px;
        }

        span {
          height: 15.6px;
          margin: 0px 0px 0px 5px;
          font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 13px;
          color: rgb(102, 102, 102);
          font-weight: normal;
        }
      }
    }
  }

  .addr {
    margin-bottom: 50px;
    margin-top: 10px;

    .noworry {
      .myself {
        .van-cell__title {
          height: 24px;
          width: 355px;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: row;
          overflow: hidden;
          align-items: stretch;
          flex-shrink: 0;

          img {
            width: 45px;
            height: 15px;
            object-fit: contain;
            position: relative;
          }

          span {
            font-size: 100%;
            display: unset;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 17px;
          }

          i {
            line-height: 17px;
          }
        }
      }

      .van-popup {
        .van-cell {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #ddd;
          height: 13.333vw;
          width: 100vw;
          padding: 0;

          .van-cell__title {
            flex: none;
            margin-left: 2.66666vw;
            height: 5.3333vw;


            img {
              width: 14.13333vw;
            }
          }

          .van-cell__value {
            flex: none;
            margin-left: 2.4vw;

            span {
              font-size: 3.2vw;
              color: #666;
            }
          }

          i {
            width: 3.2vw;
            height: 6.2vw;
            margin-left: 0.8vw;
            color: #666;
          }
        }

        .item {
          padding: 1.5vw;
          width: 100vw;
          display: flex;
          align-items: center;

          .left {

            img {
              width: 4.2667vw;
              height: 4.2667vw;

            }
          }

          .right {
            font-size: 14px;

            span {
              font-size: 3.73333vw;
              font-weight: 700;
              margin-left: 3.2vw;
            }

            h4 {
              font-size: 3.2vw;
              color: #666;
              margin-top: 1.6vw;
              margin-left: 3.2vw;
            }
          }
        }

        i {
          font-size: 16px;
        }
      }
    }
  }

  .comment {
    width: 94.6667vw;
    margin: -10vw auto;
    padding: 2.666667vw;
    background: #fff;
    border-radius: 1.6vw;
    margin-bottom: 100px;

    .van-cell {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      padding: 0;

    }

    .items {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      width: 89.3333vw;
      flex-direction: row;
      justify-content: start;
      align-items: center;

      .item {
        height: 26.6667vw;
        width: 66.6667vw;
        background: #fafafa;
        border: 0.13333vw solid #e9e9e9;
        border-radius: 1.6vw;
        margin-right: 2.66667vw;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;

        .left {
          height: 26.66667vw;
          width: 40vw;
          padding: 2.6667vw 2.6667vw 1.3333vw;
          position: relative;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          align-items: flex-start;
          border: 0 solid #000;
          margin: 0;

          .top {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;

            img {
              width: 5.33333vw;
              height: 5.3333vw;
              margin-right: 1.3333vw;
              border-radius: 50%;
            }

            span {
              font-size: 3.46667vw;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .bottom {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;

            p {
              text-overflow: ellipsis;
              font-size: 3.2vw;
              color: #333;
              text-align: justify;
              line-height: 4.8vw;
              height: 9.6vw;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }

        .right {
          width: 26.2667vw;
          height: 26.2667vw;
        }
      }
    }
  }

  .detailInfo {
    .imgs {
      p {
        margin: 0;
        padding: 0;
        font-size: 0;
      }

      img {
        width: 100%;
      }
    }
  }
}

.van-image-preview {
  background-color: white;

  .van-icon {
    top: 15px;
    right: 340px;
    font-size: 18px;
    color: white;
  }

  .van-image-preview__index {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    line-height: 50px;
    font-size: 16px;
    padding: 0 50px;
    text-align: center;
    margin-left: 187px;
    background-color: rgba(0, 0, 0, .6);
  }
}

.content {
  padding: 16px 16px 160px;
}
</style>